<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>气泡</title>
		<style type="text/css">
			*{margin: 0;padding: 0;background: gray;}
			#text{position: absolute;left: 0;right: 0;top: 0;bottom: 0;
					margin: auto;background: white;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.querySelector("#text");
				if(canvas.getContext){
					var ctx=canvas.getContext("2d");
					var arr=[];
					//向数组中绘制圆
					setInterval(function(){
						ctx.clearRect(0,0,canvas.width,canvas.height);

						//动画
						for(var i=0;i<arr.length;i++){
							if(arr[i].y<=50){
								arr.splice(i,1);
							}
							arr[i].deg+=5;
							arr[i].x=arr[i].startX+Math.sin(arr[i].deg*Math.PI/180)*arr[i].step*2;
							arr[i].y=arr[i].startY-(arr[i].deg*Math.PI/180)*arr[i].step*2;
						}
						for(var i=0;i<arr.length;i++){
							ctx.save();
							ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].alp+")";

							ctx.beginPath();
							ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
							ctx.fill();
							ctx.restore();
						}
					},1000/60)


					//向arr中注入随机圆的信息
					setInterval(function(){
						var r=Math.random()*15+2;
						var x=Math.random()*canvas.width;
						var y=canvas.height-r;

						var red=Math.round(Math.random()*255);
						var green=Math.round(Math.random()*255);
						var blue=Math.round(Math.random()*255);
						var alp=1;
						var deg=0;
						var startX=x;
						var startY=y;
						var step=Math.random()*30+10;


						arr.push({
							x:x,
							y:y,
							r:r,
							red:red,
							green:green,
							blue:blue,
							alp:alp,
							deg:deg,
							startX:startX,
							startY:startY,
							step:step

						})
					},100)
				}
			}
		</script>
	</head>
	<body>
		<canvas id="text" width="130" height="400"></canvas>
	</body>
</html>
